---
js:
- /scripts/index.js
carousel_items:
- name: OpenRA汉化组
  type: image
  image_name: openra-group.png
  abbr: group
- name: 红色警戒
  type: video
  video_base_name: red-alert-sizzle
  abbr: ra
- name: 命令与征服：泰伯利亚黎明
  type: video
  video_base_name: command-and-conquer-sizzle
  abbr: cnc
- name: 沙丘2000
  type: video
  video_base_name: dune-2000-sizzle
  abbr: d2k
---

<section class="hero site-section">
  <div class="site-section__content">
    <header class="hero__header">
      <h1 class="hero__intro-text">
        <span id="game-carousel" class="hero__intro-text__games carousel">
          <span class="carousel__items">
            {% for carousel_item in page.carousel_items %}
              <span class="hero__intro-text__{{ carousel_item.abbr }} hero__intro-text__game carousel__item carousel__item">
                {{carousel_item.name}},&nbsp;
              </span>
            {% endfor %}
          </span>
        </span>
        <span class="hero__intro-text__tagline color--gold">让经典之作在新世代重生！</span>
      </h1>
      <div class="install">
        <a class="button button--large button--primary" href="{{ '/download/' | relative_url }}">
          下载
          <svg class="button__icon icon">
            <use xlink:href="{{ '/images/icons/icons.svg#icon-download' | relative_url }}"></use>
          </svg>
        </a>
      </div>
    </header>
    <div id="hero-carousel" class="hero-carousel carousel">
      <div class="hero-carousel__items">
        <div class="carousel__items" style="width: {{ 100  | times: page.carousel_items.size }}%">
          {% for carousel_item in page.carousel_items %}
            <div id="hero-{{carousel_item.abbr}}" class="carousel__item">
              <div class="carousel__item__content aspect-16-9">
                <video
                  class="hero-carousel__image"
                  autoplay="true"
                  muted="true"
                  playsinline="true"
                  preload="auto">
                  <source src="{{ '/videos/' | relative_url }}{{carousel_item.video_base_name}}.webm" type="video/webm" />
                  <source src="{{ '/videos/' | relative_url }}{{carousel_item.video_base_name}}.mp4" type="video/mp4" />
                </video>
                {% if carousel_item.type == 'image' %}
                <img class="hero-carousel__image" src="{{ '/videos/' | relative_url }}{{carousel_item.image_name}}"/>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
      <span class="carousel__previous">
        <button class="carousel__previous__button" aria-label="Previous Item">
          <svg class="icon">
            <use xlink:href="{{ '/images/icons/icons.svg#icon-chevron-left' | relative_url }}"></use>
          </svg>
        </button>
      </span>
      <span class="carousel__next">
        <button class="carousel__next__button" aria-label="Next Item">
          <svg class="icon">
            <use xlink:href="{{ '/images/icons/icons.svg#icon-chevron-right' | relative_url }}"></use>
          </svg>
        </button>
      </span>
      <nav class="carousel__pages">
        {% for carousel_item in page.carousel_items %}
          <a href="#" class="carousel__page">
            <span class="carousel__page__indicator">Jump to {{carousel_item.name}}</span>
          </a>
        {% endfor %}
        </li>
      </nav>
    </div>

    <div class="additional-info">
      <div class="features">
        <h3>新世代RTS理念</h3>
        <ul>
          <li>在经典中引入新世代机制：<strong>移动攻击</strong>、<strong>单位经验值</strong>、<strong>战争迷雾</strong></li>
          <li>全方位支持模组与自定义地图的联机体验</li>
          <li>可以自选难度并经过改良的原作战役</li>
          <li>支持<strong>跨平台</strong>游玩：Windows、macOS以及Linuxon Windows, macOS and Linux</strong>
        </ul>
      </div>
      
      <div class="community">
        <h3>友好的玩家社群</h3>
        <ul>
          <li>基于GPLv3协议的<strong>免费开源</strong></li>
          <li>广泛听取玩家意见的平衡团队</li>
          <li>玩家自主创作的地图</li>
          <li>随意使用OpenRA模组开发工具包创造全新的即时战略游戏</li>
          <li>定期组织的直播与规模性赛事</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<hr class="site-section__divider" />

<section class="home__developer-updates site-section">
  <div class="site-section__content">
    <div class="dark-panel">
      <div class="dark-panel__header">
        <strong class="text--caps text--medium">最新进展</strong>
        <a class="home__developer-updates__view-all" href="{{ '/news/' | relative_url }}">[前往查看所有新闻]</a>
      </div>
      {% for post in site.posts limit:1 %}
        {% include developer-update.html title=post.title author=post.author created_at=post.created_at body=post.content disqus_id=post.disqus_id %}
      {% endfor %}
    </div>
  </div>
</section>
